import React from 'react'
// store是我们自己写的,所以可以明确的知道store.js在哪里,可以很容易的引入进来
// import store from '../redux/store'
// 引入actionCreator
import { add } from '../redux/actions'

// useSelector的作用: 监听redux数据的变化,当前组件使用的数据发生变化,则当前组件更新,其他组件不更新
import { useSelector, useDispatch } from 'react-redux'

export default function Zs() {
  console.log('zs更新了')
  // useSelector的返回值,就是回调中返回的值
  const count = useSelector((state) => {
    // state就是redux中的所有数据
    //当前组件要使用哪个数据,就return对应的数据
    return state.zs.count
  })

  const dispatch = useDispatch()

  return (
    <div>
      <p>{count}</p>
      <button
        onClick={() => {
          dispatch(add(2))
        }}
      >
        +2
      </button>
      <button
        onClick={() => {
          dispatch(add(8))
        }}
      >
        +8
      </button>
    </div>
  )
}
